<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { dataAPI } from '@/http/leancloud';
import { Search, Plus, Download, Refresh, Edit, Delete } from '@element-plus/icons-vue';
import {stationAPI} from "@/http";

// 查询条件
const queryForm = reactive({
  stationName: '', // 站点名称
  stationType: '', // 站点类型
  status: '' // 站点状态
});

// 表格数据
const tableData = ref<any[]>([]);
// 表格加载状态
const loading = ref(false);
// 表格选中的行
const selectedRows = ref<any[]>([]);

// 站点类型选项
const stationTypeOptions = [
  { value: 'shipping', label: '发货站' },
  { value: 'receiving', label: '到达站' },
  { value: 'transit', label: '中转站' }
];

// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 获取表格数据
const fetchTableData = async () => {
  loading.value = true;
  try {
    // 实际项目中应调用后端API获取数据
    // const response = await dataAPI.query('Station', {
    //   ...queryForm,
    //   skip: (pagination.currentPage - 1) * pagination.pageSize,
    //   limit: pagination.pageSize
    // });

    const response=await stationAPI.getStations();


    // 模拟数据

    tableData.value = response.slice(
      (pagination.currentPage - 1) * pagination.pageSize,
      pagination.currentPage * pagination.pageSize
    );
    
    pagination.total = response.length;
  } catch (error) {
    console.error('获取数据失败', error);
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 重置查询条件
const resetQueryForm = () => {
  Object.keys(queryForm).forEach(key => {
    (queryForm as any)[key] = '';
  });
  handleSearch();
};

// 查询数据
const handleSearch = () => {
  pagination.currentPage = 1;
  fetchTableData();
};

// 处理表格选择变化
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows;
};

// 处理分页变化
const handlePageChange = (currentPage: number) => {
  pagination.currentPage = currentPage;
  fetchTableData();
};

// 处理每页条数变化
const handleSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  pagination.currentPage = 1;
  fetchTableData();
};

// 添加站点
const handleAdd = () => {
  ElMessage.info('添加站点');
  // 实际项目中应该打开添加站点的表单对话框
};

// 编辑站点
const handleEdit = (row: any) => {
  ElMessage.info(`编辑站点: ${row.stationName}`);
  // 实际项目中应该打开编辑站点的表单对话框
};

// 删除站点
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除站点 ${row.stationName} 吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    stationAPI.deleteStation(row.objectId)
    ElMessage.success('删除成功');
    fetchTableData();
  }).catch(() => {});
};

// 站点状态切换
const handleStatusChange = (row: any) => {
  const action = row.status ? '启用' : '禁用';
  ElMessage.success(`已${action}站点: ${row.stationName}`);
};

// 导入站点
const handleImport = () => {
  ElMessage.info('导入站点');
  // 实际项目中应该打开导入对话框
};

// 导出站点
const handleExport = () => {
  ElMessage.info('导出站点');
  // 实际项目中应该实现导出功能
};

// 页面加载时获取数据
onMounted(() => {
  fetchTableData();
});
</script>

<template>
  <div class="station-management-view">
    <div class="page-header">
      <h2 class="page-title">站点管理</h2>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="queryForm">
        <div class="search-row">
          <el-input 
            v-model="queryForm.stationName" 
            placeholder="请输入站点编码/名称搜索" 
            clearable 
            class="search-input"
            prefix-icon="Search"
          ></el-input>
          
          <el-select 
            v-model="queryForm.stationType" 
            placeholder="站点类型" 
            clearable 
            class="search-select"
          >
            <el-option
              v-for="item in stationTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          
          <el-select 
            v-model="queryForm.status" 
            placeholder="站点状态" 
            clearable 
            class="search-select"
          >
            <el-option label="启用" value="true"></el-option>
            <el-option label="禁用" value="false"></el-option>
          </el-select>
          
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetQueryForm">重置</el-button>
        </div>
      </el-form>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="left">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
        <el-button :icon="Download" @click="handleImport">导入</el-button>
        <el-button :icon="Download" @click="handleExport">导出</el-button>
      </div>
      <div class="right">
        <el-button :icon="Refresh" circle @click="fetchTableData"></el-button>
        <el-button :icon="Edit" circle></el-button>
        <el-button class="column-display" circle></el-button>
        <el-button class="setting" circle></el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="编号" min-width="80" />
      <el-table-column prop="name" label="站名称" min-width="120" />
      <el-table-column prop="type" label="类型" min-width="100">
        <template #default="scope">
          <el-tag
            :type="
              scope.row.stationType === 'shipping' ? 'success' :
              scope.row.stationType === 'receiving' ? 'primary' :
              'warning'
            "
          >
            {{ 
              scope.row.stationType === 'shipping' ? '发货站' :
              scope.row.stationType === 'receiving' ? '到达站' :
              '中转站'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="areaCode" label="地区编码" min-width="100" />
      <el-table-column prop="manager" label="负责人" min-width="100" />
      <el-table-column prop="phone" label="联系电话" min-width="150" />
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            text
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            text
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <div class="pagination-info">
        共 {{ pagination.total }} 条
      </div>
      <div class="pagination-size">
        <el-select v-model="pagination.pageSize" @change="handleSizeChange">
          <el-option label="10条/页" :value="10" />
          <el-option label="20条/页" :value="20" />
          <el-option label="50条/页" :value="50" />
          <el-option label="100条/页" :value="100" />
        </el-select>
      </div>
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
        @current-change="handlePageChange"
      />
      <div class="pagination-jump">
        <span>前往</span>
        <el-input
          v-model.number="pagination.currentPage"
          @change="handlePageChange"
          class="page-jump-input"
        />
        <span>页</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.station-management-view {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.search-container {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
  margin-right: 10px;
}

.search-select {
  width: 150px;
  margin-right: 10px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.toolbar .left {
  display: flex;
}

.toolbar .right {
  display: flex;
}

.toolbar .right .el-button {
  margin-left: 8px;
}

.column-display::before {
  content: '\e613';
  font-family: 'element-icons';
}

.setting::before {
  content: '\e6ca';
  font-family: 'element-icons';
}

/* 表格容器样式，让表格占据剩余空间 */
.el-table {
  flex: 1;
  overflow: auto;
}

/* 调整表格列的宽度分配 */
:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

/* 防止最后一列过窄 */
:deep(.el-table__column-resize-proxy) {
  width: 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pagination-info {
  margin-right: 15px;
  color: #606266;
  font-size: 14px;
}

.pagination-size {
  margin-right: 15px;
}

.pagination-size :deep(.el-input__wrapper) {
  padding: 0 8px;
}

.pagination-size :deep(.el-input__inner) {
  text-align: center;
}

.pagination-jump {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: #606266;
  font-size: 14px;
}

.page-jump-input {
  width: 50px;
  margin: 0 5px;
}

.page-jump-input :deep(.el-input__wrapper) {
  padding: 0 8px;
}

.page-jump-input :deep(.el-input__inner) {
  text-align: center;
}
</style> 